<template>        
  <div class="customer-list">
       <span style="font-size: 30px;position: relative; top: -10px ;">生产订单</span>
       <!-- 这里放置表格等内容 -->
     <div class="add-button-bottom-right">
            <el-button class="add-button" @click="showAddModal" icon="el-icon-check">新增生产订单</el-button>
        </div>
       <el-button type="primary" icon="el-icon-loading" class="audit-button" @click="handleAudit">审核</el-button>
       <el-button class="delete-button" type="danger" icon="el-icon-delete" @click="handleDeleteSelected">删除</el-button>
        <div style="display: flex; align-items: center;">
            <!-- 搜索框 -->
            <el-input style="width: 300px; margin: 10px 20px 10px 0;"  placeholder="请输入搜索内容" prefix-icon="el-icon-search" v-model="Orders" @change="PurFenYe" clearable></el-input>
            <el-button icon="el-icon-search" circle  @change="PurFenYe"></el-button>&nbsp;&nbsp;
            <!-- 日期选择器 -->
            <el-date-picker  type="date" placeholder="请选择发起日期" v-model="SelectedDat" @change="PurFenYe"></el-date-picker>&nbsp;&nbsp;&nbsp;&nbsp;
            <el-date-picker  type="date" placeholder="请选择截至日期" v-model="SelectedDeadLine" @change="PurFenYe"></el-date-picker>
        </div>
       
        <!-- 身体 -->
        <div id="bodydiv">
                <el-table :data="prorders"  border  class="centered-table" @selection-change="handleSelectionChange"> 
                <el-table-column type="selection" width="55px"></el-table-column>
               <el-table-column prop="po_number" label="生产订单编号" ></el-table-column>
               <el-table-column prop="po_code" label="客户姓名"></el-table-column>
               <el-table-column prop="po_client_property" label="客户属性"></el-table-column>
               <el-table-column prop="po_types" label="产品种类">
               <template slot-scope="scope"> 
                    {{ scope.row.po_types }} 种
                  </template>
               </el-table-column>
               <el-table-column prop="po_packaging" label="打包方式"></el-table-column>
               <el-table-column prop="po_state" label="生产状态">
               <template slot-scope="scope">
              <span
                :style="{
                    color: scope.row.po_state == 1   ? '#2ab600' : 'red',
                }"
              >{{ scope.row.po_state == 1 ? '已完成' : '未完成' }}</span>
            </template>      
              </el-table-column>
              
              <el-table-column prop="po_warehouse" label="入库状态">
            <template slot-scope="scope">
              <span
              :style="{
                color:
                  scope.row.po_warehouse == 0
                    ? 'red'
                    : scope.row.po_warehouse == 1
                    ? 'orange'
                    : '#2ab600',
              }"
            >
              {{
                scope.row.po_warehouse == 0
                  ? "未入库"
                  : scope.row.po_warehouse == 1
                  ? "待入库"
                  : "已入库"
              }}
            </span>
            </template>
          </el-table-column>
          <el-table-column prop="AuditStatus" label="审核状态" width="auto">
          <template slot-scope="scope">
            <span
              :style="{
                color: scope.row.auditStatus == true ? '#2ab600' : 'red',
              }"
            >
              {{ scope.row.auditStatus == true ? "已审核" : "未审核" }}
            </span>
          </template>
        </el-table-column>


              <el-table-column prop="po_initiation_date" label="发起日期">
                 <template slot-scope="scope">
                 <span>{{ formatDate(scope.row.po_initiation_date) }}</span>
              </template>
                </el-table-column>
                <el-table-column prop=" po_deadline" label="截至日期">
               <template slot-scope="scope">
                 <span>{{ formatDate(scope.row.po_deadline) }}</span>
               </template>
              </el-table-column>
               <el-table-column label="操作" width="150">
               <template slot-scope="scope">
              <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">查看</el-button>
            </template>
          </el-table-column>
            </el-table>
        </div>
        <!-- 下划线分隔 -->
        <el-divider>
        </el-divider>
        <div id="taildiv">
             <!-- 分页 -->
      <div>
          <el-pagination class="pagination"
            @size-change="Change"
            @current-change="YmChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]" 
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" 
            :total="rows">
        </el-pagination>
      </div>
      <!-- 模态框新增 -->
    <el-dialog :visible.sync="isAddModalVisible"  :before-close="handleCloseModal" width="55%">
          <div class="custom-div1">
          <button @click="PurOrderAdd">提交新增</button>
        </div>
        <div class="custom-div" style="width: 300px; height: 260px;">
        <span>新增产品型号</span>
        </div>
        <el-button class="orange-button" @click="returnToList">返回列表</el-button>
        <el-form :model="PurAdd" class="custom-form">

          <el-form-item label="客户联系人:" style="position: relative; righ: 80px; top: -230px;" >
            <el-select  v-model="PurAdd.po_code" auto-complete="off" style="width: 110px; height: 25px;" placeholder="客户联系人" @change="onCustomerContactChange($event)">
              <el-option
               v-for="item in listName" 
               :key="item.client_head" style="width: 100%;"
               :label="item.po_code" 
               :value="item.client_head" class="kuang">
              </el-option>
            </el-select>
          </el-form-item> 
        
          <el-form-item label="公司名称:" style="position: relative; left: 200px; top: -293px;">
              <el-input v-model="PurAdd.po_company_name" auto-complete="off" style="width: 160px; height: 25px;"></el-input>
          </el-form-item>

           <el-form-item label="电话号码:" style="position: relative; left: 200px; top: -293px;">
              <el-input v-model="PurAdd.po_linkman" auto-complete="off" style="width: 160px; height: 25px;"></el-input>
          </el-form-item>

          <el-form-item label="联系人属性:" style="position: relative; top: -350px;" >
            <el-select  v-model="PurAdd.po_client_property" auto-complete="off"  placeholder="请选择" style="width: 110px;">
              <el-option
                 v-for="item in list2" 
                 :key="item.dd_label" style="width: 100%;"
                 :label="item.po_client_property" 
                 :value="item.dd_label" class="kuang">
              </el-option>
            </el-select>
          </el-form-item> 
    
          <el-form-item label="发起日期:" style="position: relative; left: 440px; top: -480px;">
            <el-date-picker  v-model="PurAdd.po_initiation_date" auto-complete="off" stype="date" placeholder="选择日期" style="width: 140px;"></el-date-picker>
          </el-form-item>

           <el-form-item label="截止日期:" style="position: relative; left: 440px; top: -480px;">
            <el-date-picker  v-model="PurAdd.po_deadline" auto-complete="off" stype="date" placeholder="选择日期" style="width: 140px;"></el-date-picker>
          </el-form-item>
      
          <el-form-item label="订单编号:" style="position: relative; left:660px; top: -540px;" >
            <el-input v-model="PurAdd.po_number" auto-complete="off"  disabled style="width: 140px; height: 25px;" ></el-input>
          </el-form-item>
  
          <el-form-item label="打包方式:" style="position: relative; left: 660px; top: -670px;" >
          <el-input  v-model="PurAdd.po_packaging" auto-complete="off" style="width: 140px;" >
          </el-input>
          </el-form-item>

            <div style="border-bottom: 1px solid #e0e0e0; margin-top:-590px;"></div>
            <div class="e" >
           <el-button class="a" @click="addCustomer" style="border:none;">添加</el-button>
          <el-table :data="allData" style="width:80%; border: 1px solid #ebeef5; background-color: #f7f7f7;">
                <el-table-column prop="en_id" type="index" label="序号"></el-table-column>&nbsp;&nbsp;&nbsp;&nbsp;
                <el-table-column prop="en_sing_model" label="产品型号"></el-table-column>&nbsp;&nbsp;&nbsp;&nbsp;
                <el-table-column prop="en_number" label="产品编号"></el-table-column>
                 <el-table-column prop="en_redunit" label="单位"></el-table-column>
                <el-table-column prop="en_demanded" label="重量">
                 <template slot-scope="scope"> 
                    {{ scope.row.en_demanded }}g
                  </template>
              </el-table-column>
              <el-table-column label="操作" width="250">
                <template >
                  <el-button size="minin" type="danger" icon="el-icon-edit" @click="deleteCustomer(index)">删除</el-button>
                </template>
              </el-table-column>
          </el-table>
          <div style="border-bottom: 1px solid #e0e0e0; margin-top:80px; margin-left:60px; width: 100%;"></div>
      <div class="pagination-wrapper">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage1"
      :page-sizes="[3,6,9,12]"
      :page-size="pageSize1"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalItems">
    </el-pagination>
  </div>
      </div>
     </el-form>
    </el-dialog>
    </div>
    <div>
    <el-dialog title="添加" :visible.sync="isAddProductVisible" width="400px" class="qw">
      <el-form :model="from" label-width="300px">
       <el-form-item label="产品名称" style="position: relative;  margin-left:-180px; top: 10px;">
      <el-select v-model="from.en_sing_model" controls-position="right" style="width: 180px;" @change="ContactChange($event)">
      <el-option
              v-for="item in listName2"
              :key="item.di_name"
              :label="item.en_sing_model"
              :value="item.di_name">
            </el-option>
      </el-select>
       </el-form-item>
            <el-form-item label="产品型号" style="position: relative;  margin-left:-180px; top: 10px;">
            <el-input v-model="from.en_number" placeholder="请选择" style="width: 180px;">
          </el-input>
       </el-form-item>
     <el-form-item label="单位" style="position: relative;  margin-left:-180px; top: 10px;">
            <el-select v-model="from.en_redunit"  placeholder="请选择" style="width: 180px;">
            <el-option
              v-for="item in list4"
              :key="item.dd_label"
              :label="item.en_redunit"
              :value="item.dd_label">
            </el-option>
      </el-select>
    </el-form-item>
       <el-form-item label="订单需求量" style="position: relative;  margin-left:-180px; top: 10px;">
      <el-input-number v-model="from.en_demanded" :min="0" :max="200" :step="1" controls-position="right" style="width: 180px;"></el-input-number>
    </el-form-item>
  </el-form>
      <div>
        <span slot="footer" style="display: flex; justify-content: center;">
          <el-button  @click="isAddProductVisible = false"
            style="margin-left:40px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">取消</el-button>
          <el-button type="primary" @click="SubmitModelForm"
            style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">确定</el-button>
        </span>
      </div>
    </el-dialog>
    </div>

       <!-- 模态框修改 -->
    <el-dialog :visible.sync="isUpdateModalVisible"  width="55%">
          <div class="custom-div1">
          <button @click="fetchXg">修改</button>
        </div>
        <div class="custom-div" style="width: 300px; height: 260px;">
        <span>新增产品型</span>
        </div>
        <el-button class="orange-button" @click="returnToList">返回列表</el-button>
        <el-form :model="editForm" class="custom-form">
           <el-form-item label="订单ID:" style="position: relative; righ: 200px; top: -230px;" v-if="Ycchange" >
            <el-input  v-model="editForm.po_id" auto-complete="off" style="width: 180px; height: 25px;"></el-input>
          </el-form-item>

            <el-form-item label="客户联系人:" style="position: relative; righ: 80px; top: -230px;" >
            <el-select  v-model="editForm.po_code" auto-complete="off" style="width: 110px; height: 25px;" placeholder="客户联系人" @change="onCustomerContactChange($event)">
              <el-option
               v-for="item in listName" 
               :key="item.client_head" style="width: 100%;"
               :label="item.po_code" 
               :value="item.client_head" class="kuang">
              </el-option>
            </el-select>
          </el-form-item>    
          <!-- 公司名称 -->
             <el-form-item label="公司名称:" style="position: relative; left: 200px; top: -293px;">
              <el-input v-model="editForm.po_company_name" auto-complete="off" style="width: 160px; height: 25px;"></el-input>
          </el-form-item>
         
           <el-form-item label="电话号码:" style="position: relative; left: 200px; top: -293px;">
              <el-input v-model="editForm.po_linkman" auto-complete="off" style="width: 160px; height: 25px;"></el-input>
          </el-form-item>

           <el-form-item label="联系人属性:" style="position: relative; top: -350px;" >
            <el-select  v-model="editForm.po_client_property" auto-complete="off"  placeholder="请选择" style="width: 110px;">
              <el-option
                 v-for="item in list2" 
                 :key="item.dd_label" style="width: 100%;"
                 :label="item.po_client_property" 
                 :value="item.dd_label" class="kuang">
              </el-option>
            </el-select>
          </el-form-item> 
            <el-form-item label="发起日期:" style="position: relative; left: 450px; top: -480px;">
            <el-date-picker  v-model="editForm.po_initiation_date" auto-complete="off" stype="date" placeholder="选择日期" style="width: 140px;"></el-date-picker>
          </el-form-item>

           <el-form-item label="截止日期:" style="position: relative; left: 450px; top: -480px;">
            <el-date-picker  v-model="editForm.po_deadline" auto-complete="off" stype="date" placeholder="选择日期" style="width: 140px;"></el-date-picker>
          </el-form-item>
      
          <el-form-item label="订单编号:" style="position: relative; left:670px; top: -540px;">
            <el-input v-model="editForm.po_number" auto-complete="off"  disabled style="width: 140px; height: 25px;"></el-input>
          </el-form-item>
  
          <el-form-item label="打包方式:" style="position: relative; left: 670px; top: -670px;" >
          <el-input  v-model="editForm.po_packaging" auto-complete="off" style="width: 140px;" >
          </el-input>
          </el-form-item>
          <div style="border-bottom: 1px solid #e0e0e0; margin-top:-590px;"></div>
      <div class="e">
      <el-button class="a" @click="UpdateCustomer" style="border:none;">添加</el-button>
          <el-table :data="ntity" style="width:80%; border: 1px solid #ebeef5; background-color: #f7f7f7;">
                <el-table-column prop="en_id" type="index" label="序号"></el-table-column>&nbsp;&nbsp;&nbsp;&nbsp;
                <el-table-column prop="en_sing_model" label="产品型号"></el-table-column>&nbsp;&nbsp;&nbsp;&nbsp;
                <el-table-column prop="en_number" label="产品编号"></el-table-column>
                 <el-table-column prop="en_redunit" label="单位"></el-table-column>
                <el-table-column prop="en_demanded" label="重量">
                 <template slot-scope="scope"> 
                    {{ scope.row.en_demanded }}g
                  </template>
              </el-table-column>
              <el-table-column label="操作" width="250">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" icon="el-icon-edit" @click="UpdateXCustomer(scope.row)">修改</el-button>
                  <el-button size="mini" type="danger" icon="el-icon-delete" @click="DeleteCustomerY(scope.row.en_id)">删除</el-button>
                </template>
              </el-table-column>
          </el-table>
          <div style="border-bottom: 1px solid #e0e0e0; margin-top:80px; margin-left:60px; width: 100%;"></div>
      <div class="pagination-wrapper">
      <el-pagination
          @size-change="changeModel"
          @current-change="YmchangeModel" 
          :current-page="currentPage2"
          :page-sizes="[3,6,9,12]"
          :page-size="pageSize2"
          layout="total, sizes, prev, pager, next, jumper"
          :total="ntityss">
    </el-pagination>
  </div>
  </div>
 </el-form>
    </el-dialog>
    <div>
    <!-- 模态框子添加 -->
     <el-dialog title="添加" :visible.sync="isUpateProductVisible" width="400px" class="qw">
      <el-form :model="editModelForm" label-width="300px">
       <el-form-item label="序号" style="position: relative;  margin-left:-180px; top: 10px;" v-if="Ycchange">
       <el-input v-model="editModelForm.en_id" controls-position="right" v-if="Ycchange"></el-input>
       </el-form-item>

      <el-form-item label="产品名称" style="position: relative;  margin-left:-180px; top: 10px;">
      <el-select v-model="editModelForm.en_sing_model" controls-position="right" style="width: 180px;" @change="ContactChange($event)">
      <el-option
              v-for="item in listName2"
              :key="item.di_name"
              :label="item.en_sing_model"
              :value="item.di_name">
            </el-option>
       </el-select>
       </el-form-item>

     <el-form-item label="产品型号" style="position: relative;  margin-left:-180px; top: 10px;">
      <el-input v-model="editModelForm.en_number" placeholder="请选择" style="width: 180px;">
      </el-input>
    </el-form-item>

     <el-form-item label="单位" style="position: relative;  margin-left:-180px; top: 10px;">
            <el-select v-model="editModelForm.en_redunit"  placeholder="请选择" style="width: 180px;">
            <el-option
              v-for="item in list4"
              :key="item.dd_label"
              :label="item.en_redunit"
              :value="item.dd_label">
            </el-option>
      </el-select>
    </el-form-item>

       <el-form-item label="订单需求量" style="position: relative;  margin-left:-180px; top: 10px;">
        <el-input-number v-model="editModelForm.en_demanded" :min="0" :max="200" :step="1" controls-position="right" style="width: 180px;"></el-input-number>
    </el-form-item>

     <el-form-item label="外键Id" style="position: relative;  margin-left:-180px; top: 10px;" v-if="Ycchange">
       <el-input v-model="editModelForm.pro_orderspo_id" v-if="Ycchange"></el-input>
    </el-form-item> 

      <div>
        <span slot="footer" style="display: flex; justify-content: center;">
          <el-button  @click="isUpateProductVisible = false"
            style="margin-left:40px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">取消</el-button>
           <el-button type="primary" @click="UpdateSubmitModelForm" 
            style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">确定</el-button>
        </span>
      </div>
      </el-form>
    </el-dialog>
     </div>
     <div>
     <!-- 模态框子修改 -->
    <el-dialog title="修改" :visible.sync="isUpatemodelProductVisible" width="400px" class="qw">
      <el-form :model="editFromModelForm" label-width="300px">
      <el-form-item label="序号" style="position: relative;  margin-left:-180px; top: 10px;" v-if="Ycchange">
       <el-input v-model="editFromModelForm.en_id" controls-position="right" v-if="Ycchange"></el-input>
       </el-form-item>
    
    <el-form-item label="产品名称" style="position: relative;  margin-left:-180px; top: 10px;">
      <el-select v-model="editFromModelForm.en_sing_model" controls-position="right" style="width: 180px;" @change="ContactChange($event)">
      <el-option
              v-for="item in listName2"
              :key="item.di_name"
              :label="item.en_sing_model"
              :value="item.di_name">
            </el-option>
       </el-select>
     </el-form-item>
     
      <el-form-item label="产品型号" style="position: relative;  margin-left:-180px; top: 10px;">
      <el-input v-model="editFromModelForm.en_number" placeholder="" style="width: 180px;">
      </el-input>
    </el-form-item>

     <el-form-item label="单位" style="position: relative;  margin-left:-180px; top: 10px;">
            <el-select v-model="editFromModelForm.en_redunit"  placeholder="请选择" style="width: 180px;">
            <el-option
              v-for="item in list4"
              :key="item.dd_label"
              :label="item.en_redunit"
              :value="item.dd_label">
            </el-option>
      </el-select>
    </el-form-item>

       <el-form-item label="订单需求量" style="position: relative;  margin-left:-180px; top: 10px;">
        <el-input-number v-model="editFromModelForm.en_demanded" :min="0" :max="200" :step="1" controls-position="right" style="width: 180px;"></el-input-number>
    </el-form-item>

     <el-form-item label="外键Id" style="position: relative;  margin-left:-180px; top: 10px;" v-if="Ycchange">
       <el-input v-model="editFromModelForm.pro_orderspo_id" v-if="Ycchange"></el-input>
    </el-form-item> 
  </el-form>
      <div>
        <span slot="footer" style="display: flex; justify-content: center;">
          <el-button  @click="isUpatemodelProductVisible = false"
            style="margin-left:40px; background-color: #4FC1B0; border-color: #4FC1B0; color: #fff;">取消</el-button>
          <el-button type="primary" @click="UpdateModelForm"
            style="margin-left: 20px; background-color: #4FC1B0; border-color: #4FmC1B0; color: #fff;">确定</el-button>
        </span>
      </div>
    </el-dialog>
     </div>
 </div>
 
</template>

<script>

import $http from '@/routers/base';
import { MessageBox } from 'element-ui';
import moment from 'moment'; 
export default {
  data() {
    return {
        auditStatus: "",
        index: 0,
        total:[],
        
        prorders:[],//采购订单列表数据
        Orders:"",//搜索框
        SelectedDat:"",//起始时间搜索框
        SelectedDeadLine:"",//截止时间搜索框


          currentPage: 1, //当前页
          pageSize: 10, //每页显示数
          rows: 0, //总行数


          isAddModalVisible: false, // 控制新增弹窗的显示状态
          isUpateProductVisible:false,
          isAddProductVisible:false,  
          isUpdateModalVisible:false,
          isUpdateModalVisible:false,
          isUpatemodelProductVisible:false,


           currentPage1: 1, //当前页
           pageSize1: 3, //每页显示数
           totalItems: 0, //总行数

           currentPage2: 1, //当前页
           pageSize2: 3, //每页显示数
           ntity: [], //总行数
           ntityss: 0,
           where: "",


            list2:[],
            list5:[],
            list4:[],
            allData: [], 
            Ycchange:false,
    
      PurAdd:{
          po_number:"",//生产订单编号
          po_code:"",//客户联系人
          po_company_name:"",//公司名称
          po_linkman:"",//手机号
          po_client_property:"",//客户属性
          po_initiation_date:"",//发起日期
          po_deadline:"",//截止日期
          po_packaging:"散装",//打包方式
          po_state:'0',//状态
          po_warehouse:"0",
          auditStatus:"",
        },
       
       editForm:{
          po_id:"",
          po_number:"",//生产订单编号
          po_code:"",//客户联系人
          po_company_name:"",//公司名称
          po_linkman:"",//手机号
          po_client_property:"",//客户属性
          po_initiation_date:"",//发起日期
          po_deadline:"",//截止日期
          po_packaging:"散装",//打包方式
          po_state:'0',//状态
          po_warehouse:"0",
          auditStatus:"",
         },

       editModelForm:
       {
          en_sing_model:'',
          en_number:'',
          en_redunit:'',
          en_demanded:'',
          pro_orderspo_id:'',
       },
      
      editFromModelForm:{
           en_id:'',
           en_sing_model:'',
           en_number:'',
           en_redunit:'',
           en_demanded:'',
           pro_orderspo_id:'',
        
      },
       from:{
           en_sing_model:'',
           en_number:'',
           en_redunit:'',
           en_demanded:'',

       },   
          testArr:{

      },
         listName:[],
         listName2:[],
        selectedModelId :0,
        selectedRows:[],
    };
  },
  methods: {

    handleSelectionChange(selection) {
      this.selectedRows = selection; // 更新选中的行
    },
    //复选框删除
    handleDeleteSelected(){
      if (this.selectedRows.length === 0) {
        this.$message.warning("请至少选择一个进行删除");
        return;
      }
      // 检查选中的订单中是否有已经审核通过的（audit_status === true）
      const auditedRows = this.selectedRows.filter(
        (row) => row.auditStatus === true
      );
      if (auditedRows.length > 0) {
        this.$message.warning(
          "选中的采购订单中已有部分订单已经审核通过，不能删除数据"
        );
        return;
      }
      this.$confirm("此操作将删除选中的销售订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
          this.selectedRows.forEach((row) => {
            this.deleteCustomers(row.po_id);
          });
          this.PurFenYe();
          this.selectedRows = [];
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

 deleteCustomers(po_id){
       $http
        .delete(`ProRders/OrdersDelete/${po_id}`)
        .then((response) => {
          this.$message({
            message: response,
            type: "success",
          });
          this.PurFenYe();
        })
        .catch((error) => {
          this.$message.error("删除失败，请稍后再试");
          console.error("Delete error:", error);
      });
   },


    //分页查询
    PurFenYe(){
        this.DateString = moment(this.SelectedDat).format('YYYY-MM-DD');
        this.DateString1 = moment(this.SelectedDeadLine).format('YYYY-MM-DD');
        this.where="1=1"
        if(this.Orders){
          this.where +=`and (po_number like '%${this.Orders}%' or po_code like '%${this.OrderWord}%' or po_client_property like '%${this.OrderWord}%')`
        }
        if(this.OrderDate){
          this.where += ` AND ord_purchase_date = '${this.OrderDate}'`;
        }
        if(this.SelectedDat){
          this.where +=`and (CAST(po_initiation_date AS DATE) ='${this.DateString}')`
        }
        if(this.SelectedDeadLine){
          this.where +=`and (CAST(po_deadline AS DATE) ='${this.DateString1}')`
        }
        $http.get('ProRders/getFenYe',{
            params:{
                currentPage: this.currentPage,
                pageSize: this.pageSize,
                where:this.where,
            }
        }).then(res=>{
            this.prorders=res.prorders;
            console.log(res.prorders);
            this.rows=res.rows;
        }).catch(error=>{
            console.error('Error fetching client data: ', error);
        })
    }, 

     Change: function(size) {
      this.pageSize = size;
      this.currentPage = 1;
      this.PurFenYe();
    },
    YmChange: function(page) {
      this.currentPage = page;
      this.PurFenYe();
    },
    //日期转型
    formatDate(dateString) {
            if (!dateString) {
                return '';
            }
            const date = new Date(dateString);
            if (isNaN(date.getTime())) {
                return '';
            }
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
    },
     returnToList() {
       this.isAddModalVisible = false; // 返回列表
       this.isUpdateModalVisible=false
    },
     //查询产品数据字典
    FetchPhone(){
       console.log("哈哈哈："+this.list5);
      $http
        .get("BsModel/DictQuery")
          .then(res=>{
            this.list4 = res;
            //this.list5 = res;
          })
          .catch(err => {
            alert(err);
          });
    },
     //查询产品名称
    ImgerFrom(){
      $http
        .get("BsModel/DictImagQuery")
          .then(res=>{
            this.listName2 = res;
          })
          .catch(err => {
            alert(err);
          });
    },
    // 当产品名称选择变化时触发
      ContactChange(selectedContact) {
          const contactInfo = this.listName2.find(
              (c) => c.di_name === selectedContact
          );
          if (contactInfo) {
             this.from.en_number = contactInfo.di_code;
             this.editModelForm.en_number=contactInfo.di_code;
             this.editFromModelForm.en_number=contactInfo.di_code;
          }
      },

    // 显示新增客户弹窗
    showAddModal() {
      this.isAddModalVisible = true;
    },

    //子表添加
    UpdateSubmitModelForm(){
        if (this.editModelForm.en_sing_model.trim() === '') {
       this.$message.error('请选择产品名称');
        return false;
    }
    if (this.editModelForm.en_redunit.toString().trim() === '') {
     this.$message.error('请选择单位');
     return false;
    }
     $http.post('ProRders/NtityAdd', {
           en_id: this.editModelForm.en_id,
           pro_orderspo_id: ""+this.selectedModelId,
           en_sing_model: this.editModelForm.en_sing_model,
           en_number: this.editModelForm.en_number,
           en_redunit:this.editModelForm.en_redunit,
           en_demanded:this.editModelForm.en_demanded,
           IsDeleted:false
     })
     .then(response => {
        console.log(response);
        if (response) {
             this.$message.success('添加成功！');
             this.fetchUpaheModeFrom();
             this.isUpateProductVisible = false;
             this.editModelForm.en_sing_model = '';
             this.editModelForm.en_number = '';
             this.editModelForm.en_redunit = '';
             this.editModelForm.en_demanded = '';
       } else {
         this.$message.error('添加失败！请重新添加！');
         console.log("laoliu"+response);
        }
    })
     .catch(error => {
         this.$message.error('添加失败：' + error.message);
     })
    },
    //订单修改
    fetchXg(){ 
      // 检查审核状态，如果为 true，则不允许修改
     if (this.editForm.auditStatus === true) {
        this.$message.error("修改失败：该订单已被审核，不能进行修改！");
        return;
      }
        let Cat = '0'; 
        Cat = String(this.ntityss);
        $http.put('ProRders/OrdersUpdate',{
           po_id: this.editForm.po_id,
           po_number:this.editForm.po_number,
           po_code: this.editForm.po_code,
           po_types:Cat,
           po_client_property: this.editForm.po_client_property,
           po_packaging:'散装',//打包方式
           po_initiation_date: this.editForm.po_initiation_date,
           po_deadline: this.editForm.po_deadline,
           po_company_name: this.editForm.po_company_name,
           po_linkman:this.editForm.po_linkman,
           po_state:"0",
           po_warehouse:"0",
           pro_ntitie: [{"en_sing_model":"","en_number":"","en_redunit":"","en_demanded":0}]
        })
          .then(response => {
            if (response) {
              this.$message.success('修改成功！');
                this.PurFenYe();
                this.isUpdateModalVisible = false;
            } else {
              console.log("修改的值："+this.response);
              this.$message.error('修改失败！请重试！');
            }
          }).catch(error => {
            this.$message.error('修改失败：' + error.message);
          })
    },
    //子订单修改
    UpdateModelForm(){
      $http.put('ProRders/NtityUpdate',{
             en_id:this.editFromModelForm.en_id,
             en_sing_model: this.editFromModelForm.en_sing_model,
             en_number: this.editFromModelForm.en_number,
             en_redunit:this.editFromModelForm.en_redunit,
             en_demanded:this.editFromModelForm.en_demanded,
             pro_orderspo_id:this.editFromModelForm.pro_orderspo_id
      })
      .then(response=>{
        if(response){
          this.$message.success('修改成功！');
          this.fetchUpaheModeFrom();
          this.isUpatemodelProductVisible = false;
        }else{
          this.$message.error('修改失败！ 请重新修改！');
        }
      }).catch(error=>{
        this.$message.error('修改失败：'+error.message);
      })
    },
    UpdateCustomer(){
      // 检查审核状态，如果为 true，则不允许修改
     if (this.editForm.auditStatus === true) {
        this.$message.error("添加失败：该订单已被审核，不能进行添加！");
        return;
      }
     this.isUpateProductVisible = true;
     this.FetchPhone();
    },
   //修改打开框
    handleEdit(row){
      this.isUpdateModalVisible=true;
      this.selectedModelId=row.po_id;
      this.editModelForm.pro_orderspo_id = this.selectedModelId;
      this.fetchUpaheModeFrom();
      this.GouPur();
      this. fetch();
      this.$set(this.editForm, 'po_id', row.po_id); 
      this.$set(this.editForm, 'po_number', row.po_number);
      this.$set(this.editForm, 'po_code', row.po_code);
      this.$set(this.editForm, 'po_client_property', row.po_client_property);
      this.$set(this.editForm, 'po_packaging', row.po_packaging);
      this.$set(this.editForm, 'po_initiation_date', row.po_initiation_date);
      this.$set(this.editForm, 'po_deadline', row.po_deadline);  
      this.$set(this.editForm, 'po_company_name', row.po_company_name);
      this.$set(this.editForm, 'po_linkman', row.po_linkman);
      this.$set(this.editForm, 'auditStatus', row.auditStatus);
      }, 
   //子表修改填值
    UpdateXCustomer(row){
       // 检查审核状态，如果为 true，则不允许修改
     if (this.editForm.auditStatus === true) {
        this.$message.error("修改失败：该订单已被审核，不能进行修改！");
        return;
      }
     this.isUpatemodelProductVisible=true;
     this.$set(this.editFromModelForm, 'en_id', row.en_id); 
     this.$set(this.editFromModelForm, 'en_number', row.en_number);
     this.$set(this.editFromModelForm, 'en_sing_model', row.en_sing_model);
     this.$set(this.editFromModelForm, 'en_redunit', row.en_redunit);
     this.$set(this.editFromModelForm, 'en_demanded', row.en_demanded);
     this.$set(this.editFromModelForm, 'pro_orderspo_id', row.pro_orderspo_id);
    },
    addCustomer(){
     this.isAddProductVisible = true;
     this.FetchPhone();
    },
    //查询供货商数据
    GouPur(){
      $http.get('ProRders/ClientIndex')
          .then(res=>{
            this.listName=res;
          })
          .catch(err=>{
            alert(err);
          });
    },
    //选择联系人显示对应的数据
    onCustomerContactChange(Contact) {
          const contactInfo = this.listName.find(
              (c) => c.client_head === Contact
          );
          if (contactInfo) {
              this.PurAdd.po_company_name = contactInfo.client_name;//公司名称
              this.PurAdd.po_linkman = contactInfo.client_phone;//联系人手机

               this.editForm.po_company_name = contactInfo.client_name;//公司名称
              this.editForm.po_linkman = contactInfo.client_phone;//联系人手机

          }
      },
    //查询客户属性
    fetch(){
      $http
        .get("ProRders/Queryclient")
          .then(res=>{
            this.list2 = res;
          })
          .catch(err => {
            alert(err);
          });
    },
    //生产订单-添加
    async PurOrderAdd(){
        if (this.validateForm()) {
        let po_types = '0'; // 默认值为 '0'，以防止 totalItems 为 undefined 时出错
        if (this.totalItems !== undefined) {
          po_types = this.totalItems.toString();
        }
        this.mainData =  {
           po_number:this.PurAdd.po_number,//生产编号
           po_code:this.PurAdd.po_code,//客户联系人
           po_company_name:this.PurAdd.po_company_name,//公司名称
           po_client_property: this.PurAdd.po_client_property, ////客户属性
           po_linkman:this.PurAdd.po_linkman,//联系人手机
           po_types:po_types,////产品种类
           po_initiation_date:this.PurAdd.po_initiation_date,//发起日期
           po_deadline: this.PurAdd.po_deadline,//截止日期
           po_packaging:'散装',//打包方式
           po_state:'0',
           po_warehouse:"0",
           auditStatus: false,
           "isDeleted": false,
           pro_ntitie:this.allData
           };
        $http.post('ProRders/OrdersAdd', this.mainData
         )   
          .then(response => {
            if (response) {
               this.$message.success('添加成功！');
               this.PurFenYe();
               this.isAddModalVisible = false;
                  // 清空文本框字段
                 this.PurAdd.po_code = '';
                 this.PurAdd.po_company_name = '';
                 this.PurAdd.po_client_property = '';
                 this.PurAdd.po_linkman = '';
                 this.PurAdd.po_initiation_date = '';
                 this.PurAdd.po_deadline = '';                  
            } else {
              this.$message.error('添加失败！请重新添加！');
              
            }
          }).catch(error => {
            this.$message.error('添加失败：' + error.message);
          })
 }
 },
 validateForm(){
      if (this.PurAdd.po_code.trim() === '') {
       this.$message.error('请选择客户联系人！');
        return false;
    }
   if (typeof this.PurAdd.po_initiation_date === 'string') {
    this.PurAdd.po_initiation_date = this.PurAdd.po_initiation_date.trim();
    this.$message.error('请选择发起日期！');
        return false;
     }
   if (typeof this.PurAdd.po_deadline === 'string') {
    this.PurAdd.po_deadline = this.PurAdd.po_deadline.trim();
    this.$message.error('请选择截止日期！');
        return false;
     }  
    if (this.PurAdd.po_client_property.trim() === '') {
       this.$message.error('请选择客户属性');
        return false;
    }
     // 所有字段都不为空，表单验证通过
    return true;
  },
   handleCloseModal(done){
      this.allData=[];
      this.testArr=[];
      this.totalItems=0;
      done();
  },
  //虚拟数据
    SubmitModelForm() {
        if (this.from.en_sing_model.trim() === '') {
       this.$message.error('请选择产品名称');
        return false;
    }
    if (this.from.en_redunit.toString().trim() === '') {
     this.$message.error('请选择单位');
     return false;
    }
      if(this.testArr.length>0){
        this.allData = this.testArr;
      }
      // 将表单数据添加到暂时保存数据的数组中
      this.allData.push({
        en_sing_model: this.from.en_sing_model,
        en_number: this.from.en_number,
        en_redunit: this.from.en_redunit,
        en_demanded: this.from.en_demanded,
        index: this.allData.length // 保存当前数据项的下标
      }),
      // 清空表单数据
        this.from.en_sing_model = '';
        this.from.en_number = '';
        this.from.en_redunit = '';
        this.from.en_demanded = 0;
        this.currentPage1 = 1;

    // 将 allData 的值深拷贝给 testArr
      this.testArr = JSON.parse(JSON.stringify(this.allData));
      // 更新总条目数
      this.totalItems = this.allData.length;
      // 提示用户添加成功
      this.$message.success('添加成功！');
      this.isAddProductVisible = false; // 关闭对话框 
      this.End();
      // 输出数组的最后一个元素的索引
      console.log('数组最后一个元素的索引:', this.allData.length);
      console.log(JSON.stringify(this.allData));
  },
    //虚拟删除
    deleteCustomer(index) {
  // 首先确保下标在合法范围内
  if (index >= 0 && index < this.allData.length) {
    // 从数组中删除指定下标的元素
    this.allData.splice(index,1 );
    // 更新总条目数
    this.totalItems = this.allData.length;
    // 深拷贝 allData 的值给 testArr
    this.testArr = JSON.parse(JSON.stringify(this.allData));
    // 提示用户删除成功 
    this.$message.success('删除成功！');
  } else {
    // 如果下标不在合法范围内，给出相应的提示
    this.$message.error('无法删除，下标越界！');
  }
  },
  //生产订单修改中的删除 
    async DeleteCustomerY(en_id) {
      // 检查审核状态，如果为 true，则不允许修改
     if (this.editForm.auditStatus === true) {
        this.$message.error("删除失败：该订单已被审核，不能进行删除！");
        return;
      }
      MessageBox.confirm('确认删除删除该条记录吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'bs_model',
      }).then(() => {
        $http.delete(`ProRders/NtityDelete/${en_id}`)
          .then(() => {
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
            this.fetchUpaheModeFrom();
          }).catch(error=>{
            this.$message.error('删除失败：'+error.message)
          })
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '管理员取消了删除,删除无效哦！'
          })
        })
    },
    handleSizeChange: function(size) {
      this.pageSize1 = size;
      this.currentPage1 = 1;
      this.End();
    },
    handleCurrentChange: function(page) {
      this.currentPage1 = page;
      this.End();
    },
    End() {
    // 根据当前页数和每页显示的条目数，截取相应的数据
     const startIndex = (this.currentPage1 - 1) * this.pageSize1;
     const endIndex = startIndex + this.pageSize1;
     this.allData = this.testArr.slice(startIndex, endIndex);
    },
    //子分页
   fetchUpaheModeFrom() {
      this.where = "pro_orderspo_id="+this.selectedModelId;
      // 向后端请求数据，并更新客户数据和总条数
       $http.get('ProRders/NtityFenYe', {
        params: {
          currentPage: this.currentPage2,
          pageSize: this.pageSize2,
          where:this.where,
       }
     }).then(res => {
            this.ntity =res.ntitys;
            this.ntityss=res.rows;
            console.log("66666:"+this.ntityss);
     }).catch(error => {
        console.error('Error fetching client data: ', error);
     });
    },
    changeModel: function(size) {
      this.pageSize2 = size;
      this.currentPage2 = 1;
     this.fetchUpaheModeFrom(); // 切换每页显示数后重新获取数据
    },
    YmchangeModel:function(page) {
      this.currentPage2 = page;
      this.fetchUpaheModeFrom(); // 重新获取数据
    },

    //审核
    handleAudit() {
      if (this.selectedRows.length === 0) {
        this.$message.warning("请至少选择一个采购订单进行审核");
        return;
      }

      // 检查选中的订单中是否有已经审核通过的（audit_status === true）
      const auditedRows = this.selectedRows.filter(
        (row) => row.auditStatus === true
      );
      if (auditedRows.length > 0) {
        this.$message.warning(
          "选中的采购订单中已有部分订单已经审核通过，不能再次审核"
        );
        return;
      }

      this.$confirm("此操作将审核选中的采购订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.selectedRows.forEach((row) => {
            this.auditSaleOrder(row.po_id);
          });
          this.selectedRows = [];
          this.PurFenYe();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消审核",
          });
        });
    },
    //审核方法
    auditSaleOrder(po_id) {
      $http
        .post(`ProRders/AuditSalesOrder/${po_id}`)
        .then((response) => {
          this.$message({
            message: response,
            type: "success",
          });
          this.PurFenYe();
        })
        .catch((error) => {
          this.$message.error("审核失败，请稍后再试");
          console.error("Audit error:", error);
        });
    },
  },
   mounted() {
      this.PurFenYe();//主分页查询
      this.GouPur();
      this.fetch();
      this.ImgerFrom(); //添加产品名称
      
  },
};
</script>

<style scoped src="../CSS/Model.css"></style> 
<style scoped src="../CSS/Orders.css"></style>
<style scoped>

#sale{
    position: absolute;
    bottom: 0;
    top: 140px;
    right: 100px;
    margin: 20px;/* 调整按钮与分割线的距离 */
    transform: translateY(-50px); /* 这会使元素向下移动60像素 */  
}
.custom-div {
    font-size: 20px;
    margin-left: 90px;
    margin-top: -25px;
}
.e{
     transform: translateX(-75px);
}
 /*表格单元格中的文本内容都将水平居中显示*/
  .centered-table .el-table__cell {
      text-align: center;
  }
  /*表格标题背景变色*/
  .centered-table .el-table__header th {
    background-color: #eeeeee;; /* 设置标题行的背景色 */
    color: #333; /* 设置标题行的文字颜色 */
  }
  
  .customer-list {
    background-color: #ffffff;
  }
  
  /*按钮的样式*/
  .add-button {
    background-color: #4FC1B0;
    color: #ffffff;
    transform: translateX(-8px); /* 这会使元素向右移动60像素 */  

    
  }
  
  .pagination {
    text-align: center;
    margin-top: 20px;
  }
  
  .add-button-bottom-right {
    position: absolute;
    bottom: 0;
    top: 160px; /* 将按钮相对于父容器顶部定位 */
    right: 140px;
    margin: 20px; /* 调整按钮与分割线的距离 */
  }
  .pagination-info {
    margin-bottom: 10px;
    text-align: right; /* 将当前显示条数等信息向右对齐 */
  }
  /* 调整对话框样式 */
  .el-dialog__body {  
    padding: 0px 10px 20px 10px; /* 调整内边距 */
  }
  .a{ 
  transform: translateX(80px); /* 这会使元素向右移动60像素 */ 
  background-color: var(--orange-color); /* 使用你定义的橙色变量 */
  color:#4FC1B0 ;/* 设置文本颜色为白色 */
  margin-right: -80px;
}
.qw{

  position: fixed;
    top: 14%;
    left: 10%;
    height: 600px; 
    overflow: hidden;
    
}
.custom-form {
    margin: 20px;
}
.ee{
      border-color: #4FC1B0;
  }

.query-button{
  transform: translatex(-300px); /* 这会使元素向右移动60像素 */  
}
  .form-items-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20px;
    /* 两边留出20px的空隙 */
}

.el-form-item__content {

    flex-grow: 1;
}

.form-item {
    flex: 0 0 calc(25% - 40px);
    /* 减去两侧各20px的空隙 */
    max-width: 250px;
    /* 设置文本框的最大宽度 */
    margin: 10px 0;
    /* 上下留出10px的空隙 */
}

.el-form-item__label {
    width: 120px;
    /* 可以调整标签的宽度 */
    text-align: right;
    padding-right: 10px;
}

@media (max-width: 800px) {
    .form-item {
        flex-basis: 100%;
        margin: 10px 0;
    }
}
.kuang {
    width: 60px;
    font-size: small;
}

.orange-button {
    font-size: small;
}
.button-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* 垂直居中 */
    height: 100%;
    /* 确保按钮容器占据整个高度 */
    padding-top: 10px;
    float: left;
}

.custom-button {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    background-color: #1ABC9C;
    width: 60px;
    height: 30px;
    color: #fff;
    font-size: 12px;
    border: none;
}

.custom-form {
    margin: 20px;
}

.addmodel {
    left: 120px;
}

.caoz {
    width: 70px;
    font-size: small;
}


.pagination-wrapper {
   transform: translateX(200px); /* 这会使元素向右移动60像素 */  
   height: 50px;
 }
 .audit-button{
   transform: translateY(50px); /* 这会使元素向右移动60像素 */  
   margin-right: 1px;
 }
 .delete-button{
   transform: translateY(50px); /* 这会使元素向右移动60像素 */  
 }
</style>